
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main markdown">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont icon-death"></i>
                    <div class="name">危险物品</div>
                    <div class="fontclass">.icon-death</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuangjianxia"></i>
                    <div class="name">双箭_下</div>
                    <div class="fontclass">.icon-shuangjianxia</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-add"></i>
                    <div class="name">add</div>
                    <div class="fontclass">.icon-add</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-new-arrowdown"></i>
                    <div class="name">arrow-down</div>
                    <div class="fontclass">.icon-new-arrowdown</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weixian"></i>
                    <div class="name">危险</div>
                    <div class="fontclass">.icon-weixian</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-new-arrowup"></i>
                    <div class="name">arrow-up</div>
                    <div class="fontclass">.icon-new-arrowup</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hexagon"></i>
                    <div class="name">六边形</div>
                    <div class="fontclass">.icon-hexagon</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-1"></i>
                    <div class="name">定位</div>
                    <div class="fontclass">.icon-1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-2"></i>
                    <div class="name">时间</div>
                    <div class="fontclass">.icon-2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-3"></i>
                    <div class="name">3</div>
                    <div class="fontclass">.icon-3</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-5"></i>
                    <div class="name">5</div>
                    <div class="fontclass">.icon-5</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-6"></i>
                    <div class="name">6</div>
                    <div class="fontclass">.icon-6</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-email"></i>
                    <div class="name">email</div>
                    <div class="fontclass">.icon-email</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-steam"></i>
                    <div class="name">steam</div>
                    <div class="fontclass">.icon-steam</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-7"></i>
                    <div class="name">7</div>
                    <div class="fontclass">.icon-7</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-team"></i>
                    <div class="name">team</div>
                    <div class="fontclass">.icon-team</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arena"></i>
                    <div class="name">arena</div>
                    <div class="fontclass">.icon-arena</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-text"></i>
                    <div class="name">text</div>
                    <div class="fontclass">.icon-text</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quancha"></i>
                    <div class="name">圈叉</div>
                    <div class="fontclass">.icon-quancha</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-quangou"></i>
                    <div class="name">圈勾</div>
                    <div class="fontclass">.icon-quangou</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shuangjianxia-copy"></i>
                    <div class="name">双箭_下</div>
                    <div class="fontclass">.icon-shuangjianxia-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrowup"></i>
                    <div class="name">arrow-up</div>
                    <div class="fontclass">.icon-arrowup</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrowdown"></i>
                    <div class="name">arrow-down</div>
                    <div class="fontclass">.icon-arrowdown</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-user-group"></i>
                    <div class="name">user-group</div>
                    <div class="fontclass">.icon-user-group</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-up-arrow"></i>
                    <div class="name">up-arrow</div>
                    <div class="fontclass">.icon-up-arrow</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-down-arrow"></i>
                    <div class="name">向下脚架</div>
                    <div class="fontclass">.icon-down-arrow</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-cross"></i>
                    <div class="name">cross</div>
                    <div class="fontclass">.icon-cross</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-qq"></i>
                    <div class="name">qq</div>
                    <div class="fontclass">.icon-qq</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-weibiaoti1-copy"></i>
                    <div class="name">赞</div>
                    <div class="fontclass">.icon-weibiaoti1-copy</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-search"></i>
                    <div class="name">search</div>
                    <div class="fontclass">.icon-search</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrow-up"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-arrow-up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrow-down"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-arrow-down</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-audio-off"></i>
                    <div class="name">静音</div>
                    <div class="fontclass">.icon-audio-off</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-audio-on"></i>
                    <div class="name">音效</div>
                    <div class="fontclass">.icon-audio-on</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jackpot"></i>
                    <div class="name">jackpot</div>
                    <div class="fontclass">.icon-jackpot</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-peoples"></i>
                    <div class="name">Peoples</div>
                    <div class="fontclass">.icon-peoples</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-video-xl"></i>
                    <div class="name">video</div>
                    <div class="fontclass">.icon-video-xl</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-hot"></i>
                    <div class="name">hot</div>
                    <div class="fontclass">.icon-hot</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-newsearch"></i>
                    <div class="name">seach</div>
                    <div class="fontclass">.icon-newsearch</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-clock"></i>
                    <div class="name">clock</div>
                    <div class="fontclass">.icon-clock</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-diamonds"></i>
                    <div class="name">diamonds</div>
                    <div class="fontclass">.icon-diamonds</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pull-left"></i>
                    <div class="name">left</div>
                    <div class="fontclass">.icon-pull-left</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-pull-right"></i>
                    <div class="name">right</div>
                    <div class="fontclass">.icon-pull-right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-edit"></i>
                    <div class="name">edit</div>
                    <div class="fontclass">.icon-edit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-message-opened"></i>
                    <div class="name">message-opened</div>
                    <div class="fontclass">.icon-message-opened</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-message"></i>
                    <div class="name">message</div>
                    <div class="fontclass">.icon-message</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-purse"></i>
                    <div class="name">purse</div>
                    <div class="fontclass">.icon-purse</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-record"></i>
                    <div class="name">record</div>
                    <div class="fontclass">.icon-record</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-star"></i>
                    <div class="name">star</div>
                    <div class="fontclass">.icon-star</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-coins"></i>
                    <div class="name">coins</div>
                    <div class="fontclass">.icon-coins</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-close"></i>
                    <div class="name">close</div>
                    <div class="fontclass">.icon-close</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-alt"></i>
                    <div class="name">alt</div>
                    <div class="fontclass">.icon-alt</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-knife"></i>
                    <div class="name">knife</div>
                    <div class="fontclass">.icon-knife</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-statuscomplete"></i>
                    <div class="name">status-complete</div>
                    <div class="fontclass">.icon-statuscomplete</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-statusremind"></i>
                    <div class="name">status-remind</div>
                    <div class="fontclass">.icon-statusremind</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-specialdollar"></i>
                    <div class="name">special-dollar</div>
                    <div class="fontclass">.icon-specialdollar</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-photo"></i>
                    <div class="name">photo</div>
                    <div class="fontclass">.icon-photo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-addusual"></i>
                    <div class="name">add-usual</div>
                    <div class="fontclass">.icon-addusual</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-dota2"></i>
                    <div class="name">dota2</div>
                    <div class="fontclass">.icon-dota2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-csgo"></i>
                    <div class="name">csgo</div>
                    <div class="fontclass">.icon-csgo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-date"></i>
                    <div class="name">date</div>
                    <div class="fontclass">.icon-date</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-set"></i>
                    <div class="name">set</div>
                    <div class="fontclass">.icon-set</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-visualize"></i>
                    <div class="name">visualize</div>
                    <div class="fontclass">.icon-visualize</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-username"></i>
                    <div class="name">user-name</div>
                    <div class="fontclass">.icon-username</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-password"></i>
                    <div class="name">password</div>
                    <div class="fontclass">.icon-password</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-goback"></i>
                    <div class="name">goback</div>
                    <div class="fontclass">.icon-goback</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-prev"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-prev</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-next"></i>
                    <div class="name">箭头</div>
                    <div class="fontclass">.icon-next</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-forward"></i>
                    <div class="name">forward</div>
                    <div class="fontclass">.icon-forward</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-afterward"></i>
                    <div class="name">afterward</div>
                    <div class="fontclass">.icon-afterward</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-approval"></i>
                    <div class="name">approval</div>
                    <div class="fontclass">.icon-approval</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-datenew"></i>
                    <div class="name">dateNew</div>
                    <div class="fontclass">.icon-datenew</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-golink"></i>
                    <div class="name">goLink</div>
                    <div class="fontclass">.icon-golink</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-jisha"></i>
                    <div class="name">jisha</div>
                    <div class="fontclass">.icon-jisha</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-home"></i>
                    <div class="name">home</div>
                    <div class="fontclass">.icon-home</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-second"></i>
                    <div class="name">second</div>
                    <div class="fontclass">.icon-second</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-roushan"></i>
                    <div class="name">roushan</div>
                    <div class="fontclass">.icon-roushan</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-blood"></i>
                    <div class="name">blood</div>
                    <div class="fontclass">.icon-blood</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-like"></i>
                    <div class="name">like</div>
                    <div class="fontclass">.icon-like</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-list-style"></i>
                    <div class="name">list-style</div>
                    <div class="fontclass">.icon-list-style</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-note"></i>
                    <div class="name">note</div>
                    <div class="fontclass">.icon-note</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-round"></i>
                    <div class="name">round</div>
                    <div class="fontclass">.icon-round</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-unchanged"></i>
                    <div class="name">unchanged</div>
                    <div class="fontclass">.icon-unchanged</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-rightlike"></i>
                    <div class="name">right-like</div>
                    <div class="fontclass">.icon-rightlike</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-leftlike"></i>
                    <div class="name">left-like</div>
                    <div class="fontclass">.icon-leftlike</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-readnum"></i>
                    <div class="name">read-num</div>
                    <div class="fontclass">.icon-readnum</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-serviceindex"></i>
                    <div class="name">service-index</div>
                    <div class="fontclass">.icon-serviceindex</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-leaguequestion"></i>
                    <div class="name">league-question</div>
                    <div class="fontclass">.icon-leaguequestion</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-roll"></i>
                    <div class="name">roll</div>
                    <div class="fontclass">.icon-roll</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-shopping"></i>
                    <div class="name">shopping</div>
                    <div class="fontclass">.icon-shopping</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-newedit"></i>
                    <div class="name">newedit</div>
                    <div class="fontclass">.icon-newedit</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-newsearching"></i>
                    <div class="name">newsearching</div>
                    <div class="fontclass">.icon-newsearching</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-newclose"></i>
                    <div class="name">newclose</div>
                    <div class="fontclass">.icon-newclose</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-loginlog"></i>
                    <div class="name">loginlog</div>
                    <div class="fontclass">.icon-loginlog</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-mybill"></i>
                    <div class="name">mybill</div>
                    <div class="fontclass">.icon-mybill</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-vcoin"></i>
                    <div class="name">v-coin</div>
                    <div class="fontclass">.icon-vcoin</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-steamlink"></i>
                    <div class="name">steamlink</div>
                    <div class="fontclass">.icon-steamlink</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-circleclose"></i>
                    <div class="name">circle-close</div>
                    <div class="fontclass">.icon-circleclose</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-friends"></i>
                    <div class="name">friends</div>
                    <div class="fontclass">.icon-friends</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-leagueabout"></i>
                    <div class="name">leagueabout</div>
                    <div class="fontclass">.icon-leagueabout</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-playask"></i>
                    <div class="name">playask</div>
                    <div class="fontclass">.icon-playask</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-teamplayers"></i>
                    <div class="name">teamplayers</div>
                    <div class="fontclass">.icon-teamplayers</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-howmatch"></i>
                    <div class="name">howmatch</div>
                    <div class="fontclass">.icon-howmatch</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-steam1"></i>
                    <div class="name">steam</div>
                    <div class="fontclass">.icon-steam1</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-thefirst"></i>
                    <div class="name">thefirst</div>
                    <div class="fontclass">.icon-thefirst</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-market-csgo"></i>
                    <div class="name">market-csgo</div>
                    <div class="fontclass">.icon-market-csgo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-market-dota2"></i>
                    <div class="name">market-dota2</div>
                    <div class="fontclass">.icon-market-dota2</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrow-right"></i>
                    <div class="name">双箭_下</div>
                    <div class="fontclass">.icon-arrow-right</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-arrow-left"></i>
                    <div class="name">双箭_下</div>
                    <div class="fontclass">.icon-arrow-left</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-market-password"></i>
                    <div class="name">钥匙</div>
                    <div class="fontclass">.icon-market-password</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-up"></i>
                    <div class="name">right</div>
                    <div class="fontclass">.icon-up</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-down"></i>
                    <div class="name">left</div>
                    <div class="fontclass">.icon-down</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-help"></i>
                    <div class="name">help</div>
                    <div class="fontclass">.icon-help</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-facebook"></i>
                    <div class="name">facebook</div>
                    <div class="fontclass">.icon-facebook</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-feedback"></i>
                    <div class="name">feedback</div>
                    <div class="fontclass">.icon-feedback</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-goopen"></i>
                    <div class="name">goLink</div>
                    <div class="fontclass">.icon-goopen</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-sinalogo"></i>
                    <div class="name">sinalogo</div>
                    <div class="fontclass">.icon-sinalogo</div>
                </li>
            
                <li>
                <i class="icon iconfont icon-help1"></i>
                    <div class="name">seemore</div>
                    <div class="fontclass">.icon-help1</div>
                </li>
            
        </ul>

        <h2 id="font-class-">font-class引用</h2>
        <hr>

        <p>font-class是unicode使用方式的一种变种，主要是解决unicode书写不直观，语意不明确的问题。</p>
        <p>与unicode使用方式相比，具有如下特点：</p>
        <ul>
        <li>兼容性良好，支持ie8+，及所有现代浏览器。</li>
        <li>相比于unicode语意明确，书写更直观。可以很容易分辨这个icon是什么。</li>
        <li>因为使用class来定义图标，所以当要替换图标时，只需要修改class里面的unicode引用。</li>
        <li>不过因为本质上还是使用的字体，所以多色图标还是不支持的。</li>
        </ul>
        <p>使用步骤如下：</p>
        <h3 id="-fontclass-">第一步：引入项目下面生成的fontclass代码：</h3>


        <pre><code class="lang-js hljs javascript"><span class="hljs-comment">&lt;link rel="stylesheet" type="text/css" href="./iconfont.css"&gt;</span></code></pre>
        <h3 id="-">第二步：挑选相应图标并获取类名，应用于页面：</h3>
        <pre><code class="lang-css hljs">&lt;<span class="hljs-selector-tag">i</span> <span class="hljs-selector-tag">class</span>="<span class="hljs-selector-tag">iconfont</span> <span class="hljs-selector-tag">icon-xxx</span>"&gt;&lt;/<span class="hljs-selector-tag">i</span>&gt;</code></pre>
        <blockquote>
        <p>实际情况中"iconfont"（font-family）需要修改为你项目下的font-family。可以通过编辑项目查看，默认是"iconfont"。</p>
        </blockquote>
    </div>
</body>
</html>
